'use client';

import { Modal, Form, Input } from 'antd';
import { UserInfo } from '@/types/user';
import { useMessage } from '@/hooks/useMessage';

interface RechargeModalProps {
  onClose: () => void;
  userInfo: UserInfo;
  onSubmit: (amount: number) => Promise<void>;
}

const RechargeModal: React.FC<RechargeModalProps> = ({
  onClose,
  onSubmit,
}) => {
  const [form] = Form.useForm();
  const message = useMessage();

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      await onSubmit(Number(values.amount));
      form.resetFields();
      onClose();
    } catch (error) {
      console.error('充值失败:', error);
      message.error('充值失败');
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onClose();
  };

  return (
    <Modal
      title="余额充值"
      open={true}
      onOk={handleOk}
      onCancel={handleCancel}
      destroyOnClose
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{ amount: '' }}
      >
        <Form.Item
          label="充值金额"
          name="amount"
          rules={[
            { required: true, message: '请输入充值金额' },
            { pattern: /^-?\d+(\.\d{1,2})?$/, message: '请输入有效的金额' }
          ]}
        >
          <Input placeholder="请输入" suffix="元" />
        </Form.Item>
        <div className="text-gray-500 text-sm">
          注：请填写充值金额，可为负数
        </div>
      </Form>
    </Modal>
  );
};

export default RechargeModal; 